<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link href="https://js.arcgis.com/4.21/esri/themes/light/main.css" rel="stylesheet"/>
    <script src="https://js.arcgis.com/4.21/"></script>
    <script>
        require(["esri/Map", "esri/views/SceneView","esri/layers/FeatureLayer"], (Map, SceneView,FeatureLayer) => {
            var wellsUrl =
                "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/HarperSumnerOGWells/FeatureServer/0";
            var quakesUrl =
                "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/ks_earthquakes_since_2000/FeatureServer/0";

            var startDate = new Date("Thu Jul 25 2013 00:00:00 GMT-0700 (PDT)");
            var endDate = new Date("Mon Nov 09 2015 00:01:40 GMT-0800 (PST)");

            var quakesRenderer = {
                type: "simple", // autocasts as new SimpleRenderer()
                symbol: {
                    type: "point-3d", // autocasts as new PointSymbol3D()
                    symbolLayers: [
                        {
                            type: "object", // autocasts as new ObjectSymbol3DLayer()
                            resource: {
                                primitive: "sphere"
                            }
                        }
                    ]
                },
                visualVariables: [
                    {
                        type: "color",
                        field: "date_evt",
                        stops: [
                            {
                                // From mid-2013
                                value: startDate.valueOf(),
                                color: "white"
                            },
                            {
                                value: endDate.valueOf(),
                                color: "red"
                            }
                        ] // to Nov. 2015
                    },
                    {
                        type: "size",
                        field: "mag",
                        axis: "all",
                        stops: [
                            {
                                value: 2,
                                size: 100
                            },
                            {
                                value: 5,
                                size: 2000
                            }
                        ]
                    }
                ]
            };

            var quakeTemplate = {
                // autocasts as new PopupTemplate()
                title: "{place}",
                content:
                    "<b>Date and time:</b> {date_evt}<br>" +
                    "<b>Magnitude (0-10): </b> {mag}<br>" +
                    "<b>Depth: </b> {depth} km<br>",
                fieldInfos: [
                    {
                        fieldName: "date_evt",
                        format: {
                            dateFormat: "short-date-short-time"
                        }
                    }
                ],
                actions: [
                    {
                        id: "find-wells",
                        title: "Nearby wells",
                        className: "esri-icon-notice-round"
                    }
                ]
            };


            var quakesDepthLayer = new FeatureLayer({
                url: quakesUrl,
                definitionExpression:"mag >= 2",
                displayField: ["*"],
                renderer:quakesRenderer,
                popupTemplate: quakeTemplate,
                returnZ: true,
                elevationInfo: {
                    mode: "relative-to-ground"
                }
            });

            var quakesSurfaceLayer = new FeatureLayer({
                url: quakesUrl,
            });

            var wellsLayer = new FeatureLayer({
                url: wellsUrl,
            });

            var wellsSurfaceLayer = new FeatureLayer({
                url: wellsUrl,
            });

            let map = new Map({
                basemap:"topo-vector",
                layer:[
                    quakesDepthLayer,
                    quakesSurfaceLayer,
                    wellsLayer,
                    wellsSurfaceLayer
                ],
                ground:{
                   navigationConstraint:{//导航约束
                       type:"none"//允许用户在地上 地下导航
                   }
                }
            });

            var kansasExtent = {
                // autocasts as new Extent()
                xmax: -10834217,
                xmin: -10932882,
                ymax: 4493918,
                ymin: 4432667,
                spatialReference: {
                    // autocasts as new SpatialReference()
                    wkid: 3857
                }
            };

            let scene = new SceneView({
                container:"viewDiv",
                map:map,
                viewingMode:"local",
                clippingArea:kansasExtent,
                extent: kansasExtent,//范围将视图中地图的可见部分表示为范围的实例
                environment:{
                    atmosphere:null,//设置没有大气环境
                    starsEnabled:true//没有星空
                }
            });

        });
    </script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
